<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>豆瓣</title>
    <link rel="stylesheet" href="css/demo.css">
</head>
<body>
    <div class="whole">
        <div class="header">

            <div class="log"></div>
            <div class="Textbox">
                <div class="Textbox-input">
                    <input type="text" placeholder="书籍，电影" style="border: 0px" class="Textbox-text"/>
                </div>
                <div class="search"></div>
            </div>
            <div class="books">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="header_zhong">
            <div class="zhong_a">
                <div class="zhong_a_b">
                    <span class="zhong_dou">豆瓣&nbsp;&nbsp;6.0</span>
                    <div class="zhong_app">下载豆瓣App</div>
                    <div class="zhong-app_b">
                        <img src="https://img3.doubanio.com/f/sns/0c708de69ce692883c1310053c5748c538938cb0/pics/sns/anony_home/icon_qrcode_green.png" class="zhong_b_log">
                    </div>
                </div>
                <div class="zhong_you">
                    <div class="zhong_you-log">
                        <img src="img/index.png" class="zhong_you_img">
                    </div>
                    <div class="zhong_denglu">
                        <ul>
                            <li class="zhong_zhuce">短信登陆/注册</li>
                            <li class="zhong_mima">密码登陆</li>
                        </ul>
                        <p class="zhong_tongyi">登陆注册表示同意<a href="#" class="yinsi">豆瓣使用协议,隐私政策</a></p>
                        <div class="zhong_input">
                                <div class="zhong_input_shouji">
                                    <div class="zhong_baliu">
                                        +86
                                        <div class="zhong-input-a">
                                            <input type="text"placeholder="手机号" class="input-a ">
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="yanzhen">
                                    <input type="text" placeholder="验证码" class="input-a">

                                    <div class="zhong-huoqu">获取验证码</div>
                                </div>
                                <div class="denglu">登陆豆瓣</div>
                                <div class="zhong-xiaci">
                                    <input type="checkbox" name="interest" value="zhidong"class="zhong-zidong"/>下次自动登录
                                    <p class="shoubudao">收不到验证码</p>
                                    
                                </div>
                                <hr>
                                <div class="zhong-disan">
                                    <p class="shanfang">第三方登录</p>
                                   <p><img src="https://www.douban.com/accounts/connect/wechat/?from=&redir=https%3A//www.douban.com/"></p>
                                </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="whole_section">
            <div class="Degree_heat">
                <div class="Hotspot"><span class="content">热点内容......</span><span class="More">(更多)</span></div>
                <div>
                    <ul>
                        <li class="Snowy"><img src="img/p2545509721.webp" ><span class="Violet">2019土耳其</span><span class="diary">30张照片</span></li>
                        <li class="Nearjetlag"><img src="img/p2548066498.webp"><span class="Violet">幾近时差</span><span class="diary">94张照片</span></li>
                    </ul>
                   <ul>
                        <li class="hail"><img src="img/p2546248123.webp"><span class="Violet">LaKe Baikal</span><span class="diary">27张照片</span></li>
                        <li class="Shanghai"><img src="img/p2501297569.webp"><span class="Violet">上海</span><span class="diary">37张照片</span></li>
                   </ul>
                       
                </div>
            </div>
            <div class="stray">
                <li><span class="More">给《流浪地球》五星是爱国，一星是恨国？| 杨时旸</br>专栏</span></li>     
                <li class="diary">枪稿的日记</li></br>
                <li class="around"><span>围绕《流浪地球》的是是非非仍在继续。 客观地</span></br>说，这已经无关影片本身及主创意图了...</li>
                <li class="More">35秒，我们的船撞了冰山</li>    
            </div>
            <div class="Teasing">
                <li><img src="img/a2fdfd7cca941d3.jpg"class="Milkcat" ></li> 
                <li><span class="More">热门话题  · · · · · ·  </span><span class="More">( 去话题广场 )</span></li>
                <li> <span class="More">你入手的那些有趣的博物馆文创</span></br><span class="diary">103856人浏览</span></li>
                <li> <span class="More">视频·我在跳舞的时候最快乐</span></br><span class="diary">79489人浏览</span></li>
                <li> <span class="More">我种的小树苗长大了</span></br><span class="diary">新话题 · 34606人浏览</span> </li>
                <li> <span class="More">你最喜欢的一件博物馆文物</span></br><span class="diary">700796人浏览</span></li>
                <li> <span class="More">电影里令你心生向往的小镇</span></br><span class="diary">429061人浏览</span></li>
                <li> <span class="More">堪称精神污染的广告</span></br><span class="diary">2424230人浏览</span></li>
            </div>
        </div>
        <div class="Watercressarea">
            <div class="Beansaucetime">豆瓣时间</div>
            <div class="Hotcolumn"><span class="column">热门专栏......</span><span class="More">更多</span></div>
            <div class="Read">
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/af54b920-4718-11e9-b6b0-0242ac11000a.png"style="width: 100px;height: 141px;">
                    <div class="item_font">写手好字.实用行楷30日课</div>
                    <div class="diary">成长营</div>
                </div>
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/9bb615f8-3f3e-11e9-9727-0242ac110018.jpg" style="width: 100px;height: 141px;">
                    <div class="item_font">超级IP的诞生——泛娱乐化时代爆款逻辑</div>
                    <div class="diary">音频专栏</div>
                </div>
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/9807a714-39ad-11e9-861c-0242ac11001c.jpg" style="width: 100px;height: 141px;">
                    <div class="item_font">无处不在的偏差——社会心理学揭示的思维盲点</div>
                    <div class="diary">音频专栏</div>
                </div>
                <div class="item">
                    <img src="https://img3.doubanio.com/dae/niffler/niffler/images/c3a9890a-3421-11e9-b55c-0242ac110005.jpg"style="width: 100px;height: 141px;">
                    <div class="item_font">去!把巫师叫醒——奇幻文学“四大名著入门”</div>
                    <div class="diary">音频专栏</div>
                </div>
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/d9596076-2eb4-11e9-be94-0242ac110029.jpg" style="width: 100px;height: 141px;">
                    <div class="item_font">如来的掌心——理解为佛学的16把钥匙</div>
                    <div class="diary">音频专栏</div>
                </div> 
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/9becc2ac-1ec7-11e9-b354-0242ac11001b.jpg"style="width: 100px;height: 141px;">
                    <div class="item_font">深化你讲故事的能力——写作提高营</div>
                    <div class="diary">成长营</div>
                </div>
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/f9f6b416-18c3-11e9-bdb8-0242ac110008.jpg"style="width: 100px;height: 141px;">
                    <div class="item_font">这样认识一座城——城市进化的十中姿态</div>
                    <div class="diary">音频专栏</div>
                </div>
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/56259338-1e19-11e9-9bc1-0242ac110029.jpg"style="width: 100px;height: 141px;">
                    <div class="item_font">帝王与巨商从10个经济关键词看古代中国</div>
                    <div class="diary">音频专栏</div>
                </div>
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/56259338-1e19-11e9-9bc1-0242ac110029.jpg" style="width: 100px;height: 141px;">
                    <div class="item_font">萨特来信——存在主义生活书</div>
                    <div class="diary">音频专栏</div>
                </div>
                <div class="item">
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/740a5520-18ae-11e9-abe1-0242ac110009.jpg"style="width: 100px;height: 141px;">
                    <div class="item_font">硬笔楷书三十日课&nbsp;(第二期)练字基础高效成长营</div>
                    <div class="diary">成长营</div>
                </div>
            </div>
        </div>
        <div class="Videoarea">
            <div class="video">视频</div>
            <div class="Debatemouth"><span class="column_c">辩嘴......</span></div>
            <div class="tab_a">
                 <div class="item_a">
                     <img src="img/file-1536139554.jpg"style="width:250px;height: 140px;">
                     <div class="item_font">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</div>  
                 </div>
                 <div class="item_a">
                     <img src="img/file-1535537921.jpeg"style="width:250px;height: 140px;">
                     <div class="item_font">姚晨忘带偶像包袱，展示十级搞笑功力</div>
                 </div>
                 <div class="item_a">
                     <img src="img/file-1534925572.jpg"style="width:250px;height: 140px;">
                     <div class="item_font">陈坤公开三大bug，原来你是这样的厂花 </div>
                 </div>
                 <div class="Hotcolumn"><span class="column">观影会客厅......</span></div>
                 <div class="item_a" >
                     <img src="img/file-1536839373.jpg"style="width:250px;height: 140px;">
                     <div class="item_font">焦雄屏：把电影当做一种信仰</div>
                 </div>
                 <div class="item_a">
                     <img src="img/file-1536232158.jpg" style="width:250px;height: 140px;">
                     <div class="item_font">汤姆·克鲁斯：对我来说，拍电影就是度假</div>
                 </div>
                 <div class="item_a">
                     <img src="img/file-1533265075.jpg"style="width:250px;height: 140px;">
                     <div class="item_font">蔡明亮：创作有时候是一种命运的安排</div>
                 </div>
            </div>
        </div>
    </div>
</body>
</html>